<template>
<!--
    select框的value就是选中的option的value
    子组件不能修改父组件传递过来的prop数据，遵循单向数据流
    1.父传子，传过来的value，能够设置el-select
    2.将来选择了，还需要子传父，将选择的值，更新回父组件
-->
    <el-select @change="changeSelect" :value='value' placeholder="请选择">
      <!-- select的value就是被选中的option的value值 -->
      <!-- label给用户的提示, value才是收集给后台的id -->
      <el-option
        v-for="item in channels"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
</template>

<script>
import { reqGetChannels } from '@/api/articles'
export default {
  name: 'MyChannels',
  data () {
    return {
      channels: []
    }
  },
  props: ['value'], // 父组件传递过来一个channel_id
  created () {
    this.getChannels()
  },
  methods: {
    async getChannels () {
      try {
        const res = await reqGetChannels()
        this.channels = res.data.data.channels
        // console.log(this.channels)
      } catch (err) {
        console.log(err)
      }
    },
    changeSelect (val) {
    //   console.log(val, '目标选中的值')
    // 子传父，触发事件的同时传值
    // this.$emit('change-select',val)
      this.$emit('input', val)
    }
  }
}
</script>

<style>
</style>
